
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="./img/1.jpg" /></div>
        <div class="right">
            <img src="./img/1.jpg" />
            <img src="./img/3.jpg" />
            <img src="./img/4.png" />
            <img src="./img/5.jpg" />
        </div>
    </div>
</body>
<script>
    var index = 0;
    var timer;
    var leftImg = document.querySelector('.left>img');
    var rightSmallImg = document.querySelectorAll('.right>img');
    changeOpacity();
    play();

    function play(){
        timer = setInterval(function(){
            index++;
            if(index>3){
                index = 0;
            }
            leftImg.src = rightSmallImg[index].src;
        },1000)
    }

    function changeOpacity(){
        rightSmallImg.forEach(function(imgDom,i){
            imgDom.style.opacity = index == i? 1:0.5;
        })
    }

    rightSmallImg.forEach(function(dom,i){
        dom.addEventListener('mouseover',function(){
            clearInterval(timer);
            leftImg.src = this.src;
            index = i;
            changeOpacity();
        })
        dom.addEventListener('mouseout',play);
    })
</script>